<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="8">
              <a-form-item label="学院">
                <a-select
                  showSearch
                  :allowClear="true"
                  placeholder="请选择"
                  v-model="queryParam.institute"
                  @change="changeCollege"
                  :options="collegeList"
                >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="导员名称">
                <a-select
                  showSearch
                  :allowClear="true"
                  placeholder="请选择"
                  @change="changeAssistant"
                  v-model="queryParam.assistantId"
                  :options="assistantList"
                >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="学生姓名">
                <a-input placeholder="请输入学生姓名" v-model="queryParam.userName" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="日期">
                <a-date-picker v-model="selectDate" format="YYYY-MM-DD" style="width: 100%" @change="onChange" :allowClear="true"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="时间区间">
                <a-select
                  v-model="queryParam.type"
                  placeholder="请选择时间段"
                  :allowClear="true"
                  @change="changeType"
                  :options="timeList">
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-button @click="() => {this.queryPage()}" type="primary">查询</a-button>
              <a-button @click="() =>{ queryParam = {}}" style="margin-left: 8px">重置</a-button>
              <a-button style="margin-left: 8px; color: red" @click="()=>{this.exportData('/wfuSign/exportNoSign', '未签到学生表')}">
                未签到学生表
              </a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <v-table
        :table-column="columns"
        :data="loadData"
        :rowKey="record => record.userCode"
        bordered
        ref="table"
        style="margin-top:8px"
      >
      </v-table>
    </a-card>
  </div>
</template>

<script>
import { TableMixin } from '@/mixins/TableMixin'
import { noSignPage } from '@api/wfuSign/wfuSign'
import { assistantList, collegeList, dropDownTimeCode } from '@api/base/wfuBase'
import moment from "moment";

export default {
  components: {},
  mixins: [TableMixin],
  name: 'notSignInReport',
  data () {
    return {
      selectDate: moment(new Date()),
      columns: [
        {
          title: '学生姓名',
          field: 'userName'
        },
        {
          title: '学号',
          field: 'userCode'
        },
        {
          title: '学院',
          field: 'institute'
        },
        {
          title: '专业班级',
          field: 'major'
        },
        {
          title: '学生电话',
          field: 'mobile'
        },
        {
          title: '导员姓名',
          field: 'assistantName'
        },
        {
          title: '导员工号',
          field: 'assistantCode'
        },
        {
          title: '导员电话',
          field: 'assistantMobile'
        }
      ],
      queryParam: {},
      assistantList: [],
      collegeList: [],
      timeList: [],
      visible: true,
      confirmLoading: false,
      loadData: parameter => {
        return noSignPage(
          Object.assign(parameter, this.queryParam)
        ).then(res => {
          return res.data
        })
      }
    }
  },
  watch: {
    '$route' () {
      this.type = this.$route.query.type
      if (this.type) {
        this.init()
      }
    }
  },
  mounted () {
    this.init()
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.queryParam.type = this.$route.query.type
      this.queryParam.assistantId = this.$route.query.assistantId
      this.queryParam.institute = this.$route.query.institute
      this.queryParam.date = moment(new Date()).format('YYYY-MM-DD')
      assistantList(this.queryParam.institute).then(res => {
        this.assistantList = res.data
      })
      collegeList().then(res => {
        this.collegeList = res.data
      })
      dropDownTimeCode().then(res => {
        this.timeList = res.data
      })
      this.queryPage()
    },
    handleCancel () {
      this.visible = false
    },
    changeType (e) {
      this.queryParam.type = e
      this.$forceUpdate()
    },
    changeCollege (e) {
      this.queryParam.institute = e
      this.queryParam.assistantId = undefined
      assistantList(this.queryParam.institute).then(res => {
        this.assistantList = res.data
      })
      this.$forceUpdate()
    },
    onChange(date, dateString) {
      // 格式化日期类
      if (date !== null) {
        this.queryParam.date = this.selectDate.format('YYYY-MM-DD')
      } else {
        this.queryParam.date = undefined
      }
      this.$forceUpdate()
    },
    changeAssistant (e) {
      this.queryParam.assistantId = e
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>

</style>
